<template>
	<view class="page">
	 
	
	 <view>
	            <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="100%" >
					<view class="content">
						<view class="uni-margin-wrap">
							<swiper class="swiper" autoplay="autoplay" interval="interval" duration="duration" >
								<swiper-item>
									<view class="swiperItem ">
									<image src="../../../static/home/top.png"></image> 
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view  class="swiperTitle" @click="goToPage('/pages/tabbar/tabbar-1/search/search?tab=1')">
						<input class="swiperTitle-input" placeholder="请输入想找的品类名关键字搜索" value=""/>
						<label class="swiperTitle-lable">搜索</label>
					</view>
					<view class="tabs">
						<view class="tab2" @click="goToPage('/pages/issue-purchase/issue-purchase')">
							<image src="../../../static/home/采购.png"></image>
							 
						</view>
				 
						<view class="tab" @click="hrefrouterApp()">
					 
							<image src="../../../static/img/tabbar/Profile.png"></image>
							
						</view>
						<view class="tab3" @click="hrefrouterApp()">
							<image src="../../../static/img/video.png"></image>
						</view>
					</view>
					<view class="tabs-label">
						<view class="tab">
							<label>发布采购</label>
						</view>
					 
						<view class="tab">
							<label>物流找车</label>
						</view>
						<view class="tab">
							<label>采购咨询</label>
						</view>
					</view>
					<view class="call" @click="goToDetail(notices[1])">
						<label>商机：{{notices[0]}}</label>
					</view>
					<view class="call-1">
						<view class="call-11-label">
							<label>每日采</label>
						</view>
						 <view class="call-2-label">
						 	<label>每日一次</label>
						 </view>
						 <view class="call-3-label">
						 	<label>稳定可靠</label>
						 </view>
					</view>
					
				 
	            </scroll-view>
	</view>
	 
 
 
	
	</view>
	<view>
		<scroll-view class="scroll-view-H"   >
		 <fy-dropdown :menuList="menuList">
		 	<fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions"  type="column" @change="handlerPriceChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="salesValue" dropdownKey="sales" :options="salesOptions" type="column"  @change="handlerSaleChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="timeValue" dropdownKey="time" :options="timeOptions"  type="column" @change="handlerTimeChange"></fy-dropdown-item>
		 	<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions" type="column" @change="handlerColumnChange"></fy-dropdown-item>
		 </fy-dropdown>
			<view class="scroll-view-item center"  v-for="(item, index) in list" :key="item.id">
		 
			 
				
				<view class="scroll-view_H-tab3">
					<view class="call-select2">
						 <view class="scroll-view_H-tab3-call-3-label-1">
							 <view class="call-item" >
								  <image  class="icon-image"    :src="item.preUser.iconUrl" />
							 </view>
							<label class="name">{{item.preUser.nickName}}</label>
							<label class="sex">{{item.shopUserType ? item.shopUserType : "未知身份"}}</label>
							<!-- <view class="call-item" >
								<image class="sexIcon-image"  v-if="item.preUser.gender==1" src="../../../static/img/男.png"></image>
								<image class="sexIcon-image"  v-else src="../../../static/img/女.png"></image>
							</view> -->
							 
							<label class="time">{{item.createDate}}</label>
						 </view>
					</view>
					<view class="call-select2" >
						 <view class="scroll-view_H-tab3-call-3-label-1">
							<label :class="[item.purchase === '0'?'type-image':'type-image-0']" >{{item.purchase === '0' ? "预购" : "急购"}}</label>
							<label class="type-image-name">{{item.shopName}}</label>
						 	<label class="type-image-name2">一键收藏</label>
							<image v-if="item.like" src="../../../static/img/收藏2.png" @click="likeClick(item)"/>
							<image v-else src="../../../static/img/收藏0.png" @click="likeClick(item)"/>
						 </view>
					</view>
					<view class="call-select2" @click="goToDetail(item.id)">
						 <view class="scroll-view_H-tab3-call-3-label-1">
							 
							<label class="icon-image">采购量：</label>
							<label class="dun">{{item.shopPurchaseNum}} {{item.shopPurchaseNumUnit}}</label>
							<label class="chandi">产地要求：</label>
							<label class="city">{{item.address}}</label>
						 </view>
					</view>
					<view class="call-select2" @click="goToDetail(item.id)">
						 <view class="scroll-view_H-tab3-call-3-label-1">
							<label class="icon-image">采购价格：</label>
							<label class="dun">{{item.purchasePrice}} {{item.purchasePriceUnit}}</label>
							<label class="chandi">截止日期：</label>
							<label class="city">{{item.purchaseEndDayStr}}</label>
						 </view>
					</view>
					<view class="call-select2" >
						 <view class="scroll-view_H-tab3-call-3-label-1">
							<view class="nameBtn" @click="call(item)">抢先联系</view>
							<view class="nameBtn2" @click="wxContact()" >平台咨询</view>
							<view class="nameBtn3" @click="shareOn(item.id)" >一键分享</view>
						 </view>
					</view>
					<view class="call-select2" @click="goToDetail(item.id)">
						 <view class="scroll-view_H-tab3-call-3-label-1"  >
								<label class="call-times">今日剩余沟通次数: {{item.preUser.callLimitNum-item.preUser.callNumToday}} 次</label>
							<!-- 	<view class="detailBtn">更多</view> -->
						 </view>
						 
						 
					</view>
				</view>
			</view>
			 <view class="loadingText">{{loadingText}}</view>
		</scroll-view>
		 
		 
	</view>
	<view class="bootom_right" @click="switchTab('/pages/tabbar/tabbar-2/tabbar-2')" >找货源</view>
	<uni-popup ref="sharepopup" type="bottom">
		<share-btn :sharedataTemp="sharedata"></share-btn>
	</uni-popup>
	<view class="bootom_left" @click="topBack" v-if="isShow" >回顶部</view>
 
</template>

<script>
	
import utils from '@/utils/requset.js'
import operate from '@/common/operate.js'
import app from '@/App.vue'
  
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import shareBtn from '@/components/share-btn/share-btn.vue';

export default {
 
    data() {
        return {
			isShow:false,
			sharedata: {
				type: 1,
				strShareUrl: "https://533oe08115.zicp.vip"
			},
			menuList: [ 
				{ title: '价格', dropdownKey: 'price' }, 
				{ title: '采购量', dropdownKey: 'sales' },
				{ title: '发布时间', dropdownKey: 'time' },
				{ title: '其他', dropdownKey: 'synthesis' }],
			synthesisValue: '',
			columnOptions: [
				{ title: '产地', key: 'type', default: '0',content:'', 
						list: [
							{ text: '全国', value: '0' }, 
							{ text: '北京市', value: '11' }, 
							{ text: '天津市', value: '12' }, 
							{ text: '河北省', value: '13' }, 
							{ text: '山西省', value: '14' }, 
							{ text: '辽宁省', value: '21' }, 
							{ text: '吉林省', value: '22' }, 
							{ text: '黑龙江省', value: '23' }, 
							 { text: '上海市', value: '31' }, 
							 { text: '江苏省', value: '32' }, 
							 { text: '浙江省', value: '33' }, 
							 { text: '安徽省', value: '34' }, 
							 { text: '福建省', value: '35' }, 
							 { text: '江西省', value: '36' }, 
							 { text: '山东省', value: '37' }, 
							 { text: '河南省', value: '41' }, 
							 { text: '湖北省', value: '42' }, 
							 { text: '湖南省', value: '43' }, 
							 { text: '广东省', value: '44' },
							 { text: '海南省', value: '46' },
							 { text: '重庆市', value: '50' }, 
							 { text: '四川省', value: '51' },
							 { text: '贵州省', value: '52' },
							 { text: '云南省', value: '53' }, 
							 
							 { text: '陕西省', value: '61' }, 
							 { text: '甘肃省', value: '62' }, 
							 { text: '青海省', value: '63' },
							 { text: '西藏自治区', value: '54' }, 
							 { text: '宁夏回族自治区', value: '64' },
							 { text: '新疆维吾尔自治区', value: '65' }, 
							 { text: '广西壮族自治区', value: '45' },
							 { text: '内蒙古自治区', value: '15' }, 
							 { text: '其他', value: '66' },
							 
							] 
				},
				
			],
			priceValue: '',
			priceOptions: [
				{ title: '价格', key: 'status', default: '0', content:'', 
						list: [
							
							{ text: '价低到高', value: '1' }, 
							{ text: '价高到低', value: '2' },
							] ,
				}
			],
			salesValue: '',
			salesOptions: [
				{ title: '采购量', key: 'status', default: '0', content:'', 
						list: [
							
							{ text: '量小到大', value: '1' }, 
							{ text: '量大到小', value: '2' },
							] ,
				}
			],
			
			timeValue: '',
			timeOptions: [
				{ title: '发布时间', key: 'status', default: '0', content:'', 
						list: [
							{ text: '时间正序', value: '1' }, 
							{ text: '时间倒序', value: '2' },
							] ,
				}
			],
			
			
			 
            indicatorDots: true,
            autoplay: false,
            interval: 2000,
            duration: 500,
			start1:true,
			start2:true,
			start3:true,
			start4:true,
			list: [],
			orders:[],
			notices:[],
			searchKey:"",
			page: {
				current: 0,
				size: 5,
				total: 0,
				start1:0,
				start2:0,
				start3:0,
				start4:0,
				select0:"",
				select1:"",
				select2:"",
				select3:"",
				userId:uni.getStorageSync("userInfo").id
			},
			loadingText: '-- 暂无更多 --',
        
		}
    },
	
	onLoad() {
		 
		this.getNotice();
		this.page.current = 1;
		this.getPreOrderListByPage();
	},
			 

	onReachBottom() {
		this.getMoreList();
	},
	
	onShow(e) {
		 app.navTitle();
	},
	onPageScroll(e){
		  // console.log('e:',e)
		 if(e.scrollTop>=200){
		 // 显示
		 this.isShow=true
		 }else{
			// 隐藏
			this.isShow=false
		}
	},
	components: {
		uniPopup,
		shareBtn
	},
    methods: {
	
		topBack(){
			uni.pageScrollTo({
				scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
				duration:300  // 滚动动画的时长
			})
		},
		shareOn(id){
			uni.setStorageSync("shareUrl",'/pages/tabbar/tabbar-1/tabbar-1-details/tabbar-1-details?id='+id);
			this.$refs.sharepopup.open();
		},
		call(item){
			//获取沟通次数判断
			//请求登录
			if(uni.getStorageSync("userInfo").id){
				 
			}else{
				uni.navigateTo({
					url: '/pages/loginOnlyPhone/loginOnlyPhone'
				})
				return;
			}
			console.log(item.preUser.id)
			var header = {},
				data = {
					id:item.preUser.id
				},
				url = "/purchase/preUser/updateCallNumToday", 
				method = "POST";
			if (method) {
				method = method.toUpperCase(); 
				if (method == "POST") {
					header = {
					   'Content-Type': "application/json"
					};
				} else {
					header = {
						'Content-Type': "application/json"
					};
				}	
			}	 
			 uni.request({
				url: operate.api + url,		
				data: data,
				method: method,
				header: header,
				success: (res) => {
					if(res.statusCode && res.statusCode ==200 && res.data.data.callNumToday >= res.data.data.callLimitNum){
						uni.showModal({
						  title: '提示',
						  content: "采购方今日电话被打爆了!"+"已超过对方设置的阀值，请明日再来沟通吧",
						  showCancel:false,
						  success: function (r) {
							  
						  }
						});
					}else{
						uni.makePhoneCall({
							phoneNumber:item.userPhone
						})
					}
				}
			})
		
		},

    share(){
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://533oe08115.zicp.vip",
        title: "预购网商机分享",
        summary: "农产品大量滞销，农民大量毁菜，这里却找不到货，快来看看吧！！！",
        imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },

		
		wxContact(){
			uni.navigateTo({
				 url:'/pages/webview/webview'
			});
		},
		
		hrefrouterApp() {
		  let url = 'https://work.weixin.qq.com/kfid/kfc85ec633302a22684'  // URL是要跳转的外部地址 作为参数
		  uni.navigateTo({
			url: '/pages/webview/webview?url=' + url
			// page.json定义的路径 传url 到webview界面去接收 实现跳转
		  })
		},
		getValue(value){
			console.log(value)
		   this.searchKey = value;
		   this.page.current = 1;
		   this.list = [];
		   this.getPreOrderListByPage();
		},
		
		/**
		 * 筛选
		 */
		handlerColumnChange(e) {
				if (e.cancel) return;
				
				this.columnOptions.forEach(item=>{
					item.default = e.data[item.key];
					this.synthesisValue +=e.data[item.key]+","
				})
				this.menuList[3].title = ""
				this.columnOptions.forEach(item=>{
					item.list.forEach(listItem=>{
						if(item.default == listItem.value){
							this.menuList[3].title += listItem.text +" "
						}
					})
				})
				
				 this.page.current = 1;
				 this.list = [];
				 this.page.select3 = this.menuList[3].title;
				 this.getPreOrderListByPage(); 
				
			},
			handlerSaleChange(e) {
				if (e.cancel) return;
				
				this.salesOptions.forEach(item=>{
					item.default = e.data[item.key];
				})
				this.menuList[1].title = ""
				this.salesOptions.forEach(item=>{
					item.list.forEach(listItem=>{
						if(item.default == listItem.value){
							this.menuList[1].title += listItem.text 
						}
					})
				})
				this.page.current = 1;
				 this.list = [];
				this.page.select1 = this.menuList[1].title;
				this.getPreOrderListByPage();
				 
			},
			handlerPriceChange(e) {
				
				if (e.cancel) return;
				
				this.priceOptions.forEach(item=>{
					item.default = e.data[item.key];
				})
				this.menuList[0].title = ""
				this.priceOptions.forEach(item=>{
					item.list.forEach(listItem=>{
						if(item.default == listItem.value){
							this.menuList[0].title += listItem.text 
						}
					})
				})
				
				this.page.current = 1;
				 this.list = [];
				this.page.select0 = this.menuList[0].title;
				this.getPreOrderListByPage();
			},
		
			handlerTimeChange(e) {
				
				if (e.cancel) return;
				
				this.timeOptions.forEach(item=>{
					item.default = e.data[item.key];
				})
				this.menuList[2].title = ""
				this.timeOptions.forEach(item=>{
					item.list.forEach(listItem=>{
						if(item.default == listItem.value){
							this.menuList[2].title += listItem.text 
						}
					})
				})
				this.page.current = 1;
				 this.list = [];
				this.page.select2 = this.menuList[2].title;
				this.getPreOrderListByPage();
			 
			},
		
		
		/**
		 * 分页
		 */
			getMoreList() {
				console.log("getMore")
				this.loadingText = '-- 正在加载 --'
				this.getPreOrderListByPage()
				this.page.current++;
			 
			},
			getNotice(userId){
				// 请求参数
				var header = {},
					data = {
						userId:userId
					},
					url = "/purchase/preOrder/notice", 
					method = "POST";
				if (method) {
					method = method.toUpperCase(); 
					if (method == "POST") {
						header = {
						   'Content-Type': "application/json"
						};
					} else {
						header = {
							'Content-Type': "application/json"
						};
					}	
				}
							 
				 uni.request({
					url: operate.api + url,		
					data: data,
					method: method,
					header: header,
					success: (res) => {
						console.log(res)
						if(res.statusCode && res.statusCode ==200){
							 
							if(res.data.data){
								var notices = res.data.data.notices;
								this.notices = notices;
								var orders = res.data.data.orders;
								this.orders = orders;
							} 
						}else{
							console.log("数据状态码！=200")
						}
						
					},fail(res2) {
						 
					},complete() {
						 
					}
				})
			},
			
		 
		 /**
		  * 分页请求
		  */
			getPreOrderListByPage : function() {
				if(this.menuList[0].title == "价低到高"){
					console.log("价低到高")
					
				}else if(this.menuList[0].title == "价高到低"){
					console.log("价高到低")
					
				}else{
					console.log("默认")
				}
				
				//this.page.userId = uni.getStorageSync("userInfo").id
				this.page.shopName = this.searchKey
				// 请求参数
				var header = {},
					data = this.page,
					url = "/purchase/preOrder/listByPage", 
					method = "POST";
				if (method) {
					method = method.toUpperCase(); 
					if (method == "POST") {
						header = {
						   'Content-Type': "application/json"
						};
					} else {
						header = {
							'Content-Type': "application/json"
						};
					}
				}
			 
				 uni.request({
					url: operate.api + url,		
					data: data,
					method: method,
					header: header,
					success: (res) => {
						console.log(res)
						if(res.statusCode && res.statusCode ==200){
							console.log(res)
							if(res.data.data){
								var newlist = res.data.data.records;
								if(newlist.length == 0){
									this.loadingText = '-- 暂无更多 --'
								}else{
									this.list = this.list.concat(newlist)
									uni.stopPullDownRefresh()
									this.page.current++;
								}
								 
							}else{
								console.log("load2")
							}
							 
							
						}else{
							console.log("数据状态码！=200")
						}
						
					},fail(res2) {
						return res2;
					},complete() {
					
					}
				})
		},
		
		
		/**
		 * 转评赞藏
		 */
		likeClick(e){
			let userId = uni.getStorageSync("userInfo").id;
			if(userId){
				 
			}else{
				uni.navigateTo({
					url: '/pages/loginOnlyPhone/loginOnlyPhone'
				})
				return;
			}
			// 操作类型： 0:顶  1：赞 2：评论 3：转发 4：收藏 5:举报
			// type 0:预购单   1:预售单
		 
			//请求
			// 请求参数
			console.log(e.id)
			var header = {},
				data = {
					preUserIdTarget : uni.getStorageSync("userInfo").id,
					pubUserIdTarget : e.preUser.id,
					preOrderId: e.id,
					operateType : 4,
					type : 0,
				},
				url = "/purchase/shopOrOrderMyLike/saveOrUpdate", 
				method = "POST";
			if (method) {
				method = method.toUpperCase(); 
				if (method == "POST") {
					header = {
					   'Content-Type': "application/json"
					};
				} else {
					header = {
						'Content-Type': "application/json"
					};
				}
			}
						 
			 uni.request({
				url: operate.api + url,		
				data: data,
				method: method,
				header: header,
				success: (res) => {
					if(res.statusCode && res.statusCode ==200){
						console.log(res)
						this.list.forEach(item=>{
							if(item.id == e.id){
								item.like = !item.like
							}
						})
					}else{
						console.log("数据状态码！=200")
					}
					
				}
			})
		},
	
		
		goToPage(url) {
		 
			console.log(url)
			if (!url) return;
			uni.navigateTo({
				url
			});
		},
		
		goToDetail(id) {
			let url = "/pages/tabbar/tabbar-1/tabbar-1-details/tabbar-1-details?id="+id;
			uni.navigateTo({
				url
			});
		},
		
		
		switchTab(url) {
			 
			if (!url) return;
			uni.switchTab({
				url
			});
		},
		 
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>


<style>

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-top: 32rpx;
		padding: 16rpx;
	}
 
	.loadingText {
		margin-top: 10px;
		height: 25px;
		line-height: 25px;
		font-size: 10px;
		color: #aaaaaa;
		text-align: center;
		margin-bottom: 60px;
	}
 
	.nobodyImage {
		width: 557rpx;
		height: 300rpx;
		margin-left: 104rpx;
	}
 
	.nobodyText {
		font-size: 40rpx;
		color: #666666;
		text-align: center;
		margin-top: 63rpx;
 
	}
 
	.scroll-view-H{
		margin-bottom: 50px;
	}
	
	.bootom_right {
		position: fixed;
		display: flex;
		flex-direction: column;
		right: 0px;
		bottom: 150px;
		z-index: 10;
		padding: 3px;
		padding-left: 10px;
		border-radius: 3px;
		border: 1px solid #ddd;
		background: #fff;
		width: 20px;
		height: 70px;
		background-color: #43CF7C;
		border-radius: 25px 5px 5px 25px;
		color: #FFF;
		line-height: 22px;
	
	}
	
	.bootom_left {
		position: fixed;
		display: flex;
		flex-direction: column;
		left: 0px;
		bottom: 150px;
		z-index: 10;
		padding: 3px;
		padding-left: 10px;
		border-radius: 3px;
		border: 1px solid #ddd;
		background: #fff;
		width: 20px;
		height: 70px;
		background-color: #D43030;
		border-radius: 5px 25px 25px 5px;
		color: #FFF;
		line-height: 22px;
	
	}
	.aa{
        transition: all 1s;
    }
    .go{
        transform:rotate(-180deg);
        transition: all 1s;
    }
	.call-select2{
		margin-top: 10px;
		font-size: 13px;
		
	}
	.scroll-view_H-tab3{
		text-align: center;
		background-color: white;
		border-radius: 5px 5px 5px 5px;
		z-index: 9;
		padding: 10px;
		margin-top: 10px;
	}
	.scroll-view_H-tab3 image{
		border-radius: 25px 25px 25px 25px;
		height: 26px;
		width: 26px;
		
	}
	.scroll-view_H-tab3-call-3-label-1{
		display: flex;
		width: 100%;
	}
	 
	.icon-image{
	    flex: 2;
	    display: flex;
	    text-align: left;
	    justify-content: center;
	    flex-direction: column;
	    font-weight: 700;
 
	}
	 .sexIcon-image{
	 	 border-radius: 25px 25px 25px 25px;
	 	 flex: 1;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	font-weight: bold;
	  
	 }
	  
	 
	 .chandi{
	 	flex:2;
	 	display: flex;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	font-weight: bold;
	 }
	
	.dianzan{
			flex:4;
			text-align: right;
	}
 
	.icon-image-dianzan{
		flex:2;
		text-align: right;
	}
	.name2{
		flex:2;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
		font-weight: bold;
	}
	.nameBtn{
		flex:2;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		background: #FF8080;
		margin-right: 5px;
	
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		height: 25px;
		line-height: 25px;
		
	}
	.nameBtn2{
		flex:2;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		
		background: rgba(67, 207, 124, 1);
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		height: 25px;
		line-height: 25px;
		
	}
	.nameBtn3{
		flex:2;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		background: rgba(67, 207, 124, 1);
		background: #00B2FF;
		margin-left: 5px;
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		height: 25px;
		line-height: 25px;
		
	}
	.detailBtn{
		flex:0.5;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		background: #eee;
		margin-left: 5px;
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		height: 25px;
		line-height: 25px;
	}
	
	.name{
		flex:0.8;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
	
	}
	.type-image{
		border-radius: 5px 25px 25px 5px;
		width: 30px;
		text-align: left;
		margin-top: 4px;
		padding: 2px;
		height: 15px;
		font-weight: bold;
		line-height: 13px;
		font-size: 13px;
		color: rgba(255, 255, 255, 1);
		background-color: #43CF7C;
	}
	.type-image-0{
		border-radius: 5px 25px 25px 5px;
		width: 30px;
		text-align: left;
		margin-top: 4px;
		padding: 2px;
		height: 15px;
		font-weight: bold;
		line-height: 13px;
		font-size: 13px;
		color: rgba(255, 255, 255, 1);
		background-color: #D43030;
	}
	
	.type-image-name{
		width: 150px;
		display: flex;
		text-align: left;
		margin-left: 10px;
		justify-content: center;
		flex-direction: column;
		font-weight: bold;
		font-size: 14px;
	
	}
	.type-image-name2{
 
		flex: 4;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
		margin-right: 10px;
		color: rgba(204, 204, 204, 1);
	
	}
	.dun{
		flex:2;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
	
	}
	.city{
		flex:2;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
	
	}
	.type{
		flex:2;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
	}
	.sex{
		flex: 1;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
		padding-left: 20px;
	}
	.time{
		flex: 2;
		display: flex;
		text-align: right;
		justify-content: center;
		flex-direction: column;
		color: rgba(204, 204, 204, 1);
		
	}
	.call-times{
		flex: 2;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
		color: rgba(204, 204, 204, 1);
	}
	.scroll-view_H {
		white-space: nowrap;
		
	}
	
	scroll-view ::-webkit-scrollbar {
		    display:none;
		   	  width:0;
		   	  height:0;
		   	  color:transparent;
	}
		
	.scroll-view-item_H {
		display: inline-block;
		height: 140px;
		width: 140px;
		text-align: center;
		
	}
	 
	.uni-bg-red {
		background: red;
	}
	
	 .detail-1{
		margin-top: 5px;
		 font-size: 14px;
		 font-weight: 400;
		 letter-spacing: 0px;
		 line-height: 12px;
		 margin-left: 2px;
	 }
	 .detail-1-1{
		  margin-top: 5px;
		 font-size: 14px;
		 font-weight: 400;
		 letter-spacing: 0px;
		 line-height: 16px;
		 color: rgba(0, 0, 0, 1);
	 }
	 
	 .detail-1-2{
		 margin-top: 5px;
		 margin-left: 5px;
		 font-size: 14px;
		 font-weight: 400;
		 letter-spacing: 0px;
		 line-height: 12px;
		 color: rgba(153, 153, 153, 1);
	 }
	 
	 .upImage{
			position:absolute;
			z-index:10;
			margin-top: -50px;
			margin-left: 7.5px;
			width: 120px;
			border-radius: 2px;
			background: rgba(255, 255, 255, 1);
			padding: 2px;
	 }
	.page{
		width: 100%;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
	 }
 
	.tabs{
		height: 96px;
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: -20px;
		display: flex;
		z-index: 9;
	}
	.tabs-label{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: -30px;
		height: 18px;
		display: flex;
		font-weight: bold;
		z-index: 9;
	}
	.tab{
		flex: 1;
		text-align: center;
		background-color: white;
		z-index: 9;
	}
	.tab2{
		flex: 1;
		text-align: center;
		background-color: white;
		 border-radius: 5px 0px 0px 5px;
		z-index: 9;
	}
	

	.scroll-view_H-tab2{
		flex: 1;
		text-align: center;
		background-color: white;
		 border-radius: 5px 0px 0px 5px;
		z-index: 9;
	}
	.scroll-view_H-tab2 image{
		border-radius: 5px 5px 5px 5px;
		height: 120px;
		width: 130px;
		margin-top:10px;
	}


	 
	.tab3{
		flex: 1;
		text-align: center;
		background-color: white;
		border-radius: 0px 5px 5px 0px;
		z-index: 9;
	}
	.tab image{
		border-radius: 5px 5px 5px 5px;
		height: 50px;
		width: 50px;
		margin-top:10px;
	}
	 .tab label{
		color: black;
	 	height: 10px;
	 	width: 50px;
	 }
	 
	 
	 .tab2 image{
	 	border-radius: 5px 5px 5px 5px;
	 	height: 50px;
	 	width: 50px;
	 	margin-top:10px;
	 }
	.tab3 image{
		border-radius: 5px 5px 5px 5px;
		height: 50px;
		width: 50px;
		margin-top:10px;
	}
	.content{
		display: flex;
	}
	 
	 
	 .uni-margin-wrap{
		 
		width: 100%;
		height: 200px;
			 
	 }
	 
	 
	.swiper{
		height: 200px;
		width: 100%;
		text-align: center;
			 
	}
	.swiperItem image{
		width: 100%;
	}
	
	
	 .swiperTitle{
		height: 32px;
		line-height: 32px;
		position: absolute;
		display: flex; 
		top: 10px;
		right: 15px;
		left: 15px;

	 }
	 .swiperTitle-lable{
		color: rgba(255, 255, 255, 1);
		background-color: rgba(67, 207, 124, 1);;
		text-align: center;
		flex: 1.5;
		border-radius: 15px;
		height: 30px;
		line-height: 30px;
		margin-top: 2px;
		z-index: 1;
	 }
	 
	 .swiperTitle-input {
		padding-left: 10px;
		height: 34px;
		line-height: 34px;
	 	opacity: 0.6;
	 	border-radius: 15px;
	 	background: rgba(255, 255, 255, 1);
		color:black;
		flex: 9.5;
		margin-right: -60px;
		 
	 }
	 
	 .input-placeholder{
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 16px;
		background: rgba(255, 255, 255, 1);
		text-align: left;
	 }
  
	.call{
		background-color: bisque;
		padding-left: 10px;
		border-radius: 5px;
		margin-top: 20px;
		margin-left: 10px;
		margin-right: 10px;
		
	}
	.call-1{
		display: flex;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		width: 50%;
	}
	.call-1-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
	.call-1-label uni-label{
		font-weight: bold;
		color: #D43030;
	}
	.call-11-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
		 
		 
	} 
	.call-11-label uni-label{
		font-weight: bold;
		color: #43CF7C;
	}
	.call-1-label image{
		height: 12px;
		width: 12px;
		text-align: center;
		margin-left: 5px;
	}
	.call-2-label{
		flex: 1;
		font-weight: bold;
		text-align: center;
	} 
	.call-2-label image{
		height: 12px;
		width: 12px;
		text-align: center;
		margin-left: 5px;
	}
	.call-3-label{
		flex: 1;
		font-weight: bold;
	}
	 .call-3-label image{
	 	height: 12px;
	 	width: 10px;
	 	text-align: center;
	 	margin-left: 5px;
	 }
	.call-select{
		display: flex;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.call-1-label{
		flex: 1;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		margin-right: 10px;
		line-height: 20px;
		text-align: center;
		color: rgba(0, 0, 0, 1);
	} 
	.call-2-label{
		flex: 1;
	} 
	.call-3-label{
		flex: 1;
	}
 
 
</style>
